<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title id="title"></title>
</head>
<body>




<div id="images"></div>



<div style="width:90%;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
<br/>
<br/>
<div style="width: 90%; margin: 0 auto;">
    <p style="text-align: center; font-size: 40px; font-weight: bold; color: #999c9a;" >始于指南</p>
    <p style="margin-left: 20px; font-size: 40px;" id="visitorUpdateInfo">
    </p>
</div>



<script id="images_template" type="text/template">
    {{~it.images : value : index}}
    {{? index == 0}}
    <div style="text-align: center;">
        <img src="{{=it.ossUrl}}{{=value}}" width="100%"/>
    </div>

    <br/>
    <br/>

    <div style="text-align: center;" id="star">
        <h1 style="font-size: 50px;">{{=it.title}} - {{=it.content}}</h1>
        <br/>
    </div>
    <br/>
    <br/>
    {{?}}

    {{? index != 0}}
    <div style="text-align: center;">
        <img src="{{=it.ossUrl}}{{=value}}" width="90%"/>
    </div>

    <br/>
    <br/>
    {{?}}

    {{? index == 1 && it.commentCount > 0}}
    <div style="width:90%;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
    <br/>
    <br/>
    <div style="text-align: center;">
        <span style="font-size: 30px; margin-bottom: 10px; color : #999c9a"> {{=it.commentCount}} 条经验</span>
        <br/>
        <br/>
        <img src="{{=it.ossUrl}}{{=it.commentUserId}}.png" width="15%"/>
        <br/>
        <span style="font-size: 40px;">{{=it.commentUserName}}</span>
        <br/>
        <span style="font-size: 30px; color : #999c9a">{{=it.commentTime}}</span>


    </div>
    <div style="width: 90%; margin : 0 auto;">
    <p style="text-indent: 2em; font-size: 30px; ">
        {{=it.commentContent}}
    </p>
    </div>
    <p style="text-align: center; font-size: 30px;">
        <br/>
        
    </p>
    <div style="width:90%;height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
    <br/>
    <br/>

    {{?}}


    {{~}}
</script>
<script src="../js/jquery-2.1.4.js" type="text/javascript"></script>
<script src="../js/doT.min.js" type="text/javascript"></script>
<script type="text/javascript">

    function loadJson(json) {
        $("#title").html(json.title);
        $("#visitorUpdateInfo").html(json.visitorUpdateInfo);
        var tempFn = doT.template($("#images_template").html());
        var resultText = tempFn(json);
        $("#images").html(resultText);
        $("#star").append(buildStar(json.star));
    };

    function buildStar(count) {
        var star = "<img src='../images/star@3x.png' width='3%'>";
        var unStar = "<img src='../images/starline@3x.png' width='3%'>";
        var starCount = count;
        var unStarCount = 5 - count;
        var starHtml = "";
        for(var i = 0; i < starCount; i ++) {
            starHtml += star;
        }
        for(var i = 0; i < unStarCount; i++) {
            starHtml += unStar;
        }
        return starHtml + "&nbsp;&nbsp;&nbsp;" + "<span style='font-size: 30px; margin-top: -20px;'>"+ count + "</span>";
    }
</script>
<script type="text/javascript">
    loadJson('{{#json}}');
</script>
</body>

</html>